<template>
	<view class="pagesbg">
		<!-- 头部 -->
		<view class="header_bar header_fixed header_main">
			<view class="header">
				<view class="header-goBack" @tap.stop="$tools.back(1)"></view>
				<view class="header-title">充值</view>
			</view> 
		</view> 
		
		<view class="balance">
			<view class="balance-top">
				<view class="integral">
					<view class="integral-list">
						<view class="integral-list__item">
							<view class="info">余额</view>
							<view class="number">{{ userMoney.validNum3 ? userMoney.validNum3 : 0 }}</view>
							<view class="btnBox">
								<view class="btn" @tap.stop="$tools.jump('./rechargeList')">充值</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="headerTitle">资产明细</view>
		
		<view class="record">
			<view class="record-wrapper" v-if="isShowPage">
				<scroll-view scroll-y="true" class="record-height" 
				v-if="recordsList.length != 0"
				@scrolltolower="lower()">
					<view class="record-item record-balanceBg" v-for="(item,index) in recordsList" :key="index"
					>
						<view class="record-left">
						<view class="record-title">金额：</view>
						<view class="record-title">充值方式：</view>
						<view class="record-title">状态：</view>
						<view class="record-title">时间：</view>
						</view>
						<view class="record-right">
							<view class="record-title">{{ item.cnt }}</view>
							<view class="record-title">{{ getPayMethod(item.payMethod) }}</view>
							<view class="record-title record-status--orange" v-if="item.rechargeStatus == 1">审核中</view>
							<view class="record-title record-status--red" v-else-if="item.rechargeStatus == 3">充值失败({{ item.remark }})</view>
							<view class="record-title record-status--blue" v-else-if="item.rechargeStatus == 2">充值成功</view>
							<view class="record-title">{{ item.createTime }}</view>
						</view>
					</view>
				</scroll-view>
				<view class="initNoData" v-if="recordsList.length == 0">暂无记录</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				coinType: '',
				isShowPage: false,
				pages: 1,
				pageIndex: 1,
				pageSize: 20,
				recordsList: [],
				userMoney: {},
			}
		},
		computed:{
			getPayMethod(){
				return function(type){
					switch (type){
						case 1:
							return '微信';
							break;
						case 2:
							return '支付宝';
							break;
						case 3:
							return '银行卡';
							break;
					}
				}
			}
		},
		onLoad(options) {
			this.coinType = options.value1;
		},
		onShow() {
			this.init();
		},
		methods: {
			init(){
				this.getUserMoney();
				this.isShowPage = false;
				this.pages = 1;
				this.pageIndex = 1;
				this.recordsList = [];
				this.getRechargeRecord();
			},
			getRechargeRecord() {
				var data = {
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					coinType: this.coinType,
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/money/rechargeRecord',data, res => {
						if(res.code == 200){
							this.isShowPage = true;
							this.pages = res.data.pages;
							this.recordsList = this.recordsList.concat(res.data.list);
							uni.hideLoading();
						}
					}, err => {
						uni.hideLoading();
					}, 'GET'
				);
			},
			lower(){
				console.log("ddd")
				if (this.pageIndex >= this.pages) {
					return this.$tools.toast('到底了');
				} else {
					this.pageIndex++;
					console.log("+++")
					this.getUserMoneyLogList();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.balance{
		&-top{
			background: url('@/static/public/balanceBg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin: 20rpx 30rpx 0;
			height: 274rpx;
			.asset{
				@include flexCenterColumn;
				padding: 88rpx 0;
				.title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #FFFFFF;
				}
				.num{
					font-family: DIN, DIN;
					font-weight: 700;
					font-size: 48rpx;
					color: #FFFFFF;
					margin: 22rpx 0;
				}
			}
			.integral{
				padding: 46rpx 0 32rpx 42rpx;
				&-list{
					@include flexBetween;
					&__item{
						@include flexLeftColumn;
						width: 100%;
						.info{
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #FFFFFF;
						}
						.number{
							font-family: DIN, DIN;
							font-weight: 700;
							font-size: 44rpx;
							color: #FFFFFF;
							margin-top: 20rpx;
						}
						.btnBox{
							@include flexBetween;
							width: 55%;
							margin-top: 20rpx;
							.btn{
								background: #FFFFFF;
								box-shadow: 4rpx 4rpx 5rpx 0rpx rgba(0,0,0,0.15);
								border-radius: 14rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #1989F8;
								padding: 16rpx 50rpx;
							}
						}
					}
					.line{
						width: 0rpx;
						height: 66rpx;
						border: 2rpx solid rgba(255,255,255,0.41);
					}
				}
			}
		}
	}
	.headerTitle{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #3D3D3D;
		height: 92rpx;
		margin: 0 32rpx;
		padding: 40rpx 0 28rpx;
	}
	
	.record-height{
		height: calc(100vh - 90rpx - 92rpx - 294rpx);
		/* #ifdef APP-PLUS */
		height: calc(100vh - 165rpx - 92rpx - 294rpx);
		/* #endif */
	}
	
	.initNoData{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #999999;
		&::before{
			content: '';
			width: 100%;
			height: 254rpx;
			display: inline-block;
			background-image: url('~@/static/public/noData.png');
			background-position: center;
			background-repeat: no-repeat;
			background-size: 254rpx 254rpx;
		}
	}
	
	.record{
		&-title{
			margin-bottom: 30rpx;
		}
	}
	
</style>